<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>使用HTML/CSS实现一个复杂页面</title>
        <link rel="stylesheet" type="text/css" href="./task1-9.css">
    </head>
    <body>
        <nav>
            <img src="img/logo.png" alt="ife">
            <div>
                <input type="text">
                <a href="###">登录</a>
            </div>
        </nav>
        <div class="max-wrap">
            <main>
            <div class="main-head">
                <a href="###">c站&nbsp;&#47;</a>
                <a href="###">个人报表&#47;</a>
                <a href="###">文件一&#47;</a>
                <a href="###" class="head-spanA">文档一</a>
            </div>
            <div class="wrap">
                <div class="wrap1 wrap-border">
                    <div class="wrap1-1">
                        <span>查询项</span>
                        <select name="" >
                            <option>第一项</option>
                            <option>第二项</option>
                        </select>
                    </div>
                    <div class="wrap1-2">
                        <span>买方</span>
                        <select class="margin-bottom width4">
                            <option value="">小A</option>
                        </select>
                        <span>卖方</span>
                        <select class="width4">
                            <option value="">小C</option>
                        </select>
                    </div>
                    <div class="wrap1-3">
                        <span>日期</span>
                        <input type="date">
                        <span class="margin-auto">总耗时</span>
                        <select class="margin-bottom width3">
                            <option value="">8天</option>
                        </select>
                        <span>人数</span>
                        <select class="width1">
                            <option value="">10人</option>
                        </select>
                        <span class="margin-auto">成交项</span>
                        <select class="width2">
                            <option value="">10项目</option>
                        </select>
                    </div>
                    <div class="wrap1-4">
                        <a href="###">搜索</a>
                    </div>
                </div>
                <div class="wrap2">
                    <div class="wrap-border div-btn">
                        <a class="div-btnc1"></a>
                    </div>
                    <ul>
                        <li class="wrap-border">
                            <span>10:00 am</span>
                            <em>&yen;<strong>1200</strong></em>
                        </li>
                        <li class="wrap-border">
                            <span>11:00 am</span>
                            <em>&yen;<strong>1300</strong></em>
                        </li>
                        <li class="wrap-border">
                            <span>12:00 am</span>
                            <em>&yen;<strong>1300</strong></em>
                        </li>
                        <li class="wrap-border">
                            <span>01:00 pm</span>
                            <em>&yen;<strong>1400</strong></em>
                        </li>
                        <li class="wrap-border">
                            <span>02:00 pm</span>
                            <em>&yen;<strong>1500</strong></em>
                        </li>
                        <li class="wrap-border">
                            <span>03:00 pm</span>
                            <em>&yen;<strong>1800</strong></em>
                        </li>
                    </ul>
                    <div class="wrap-border div-btn mr ">
                        <a class="div-btnc2"></a>
                    </div>
                    <div class="wrap-border history-search">
                        <span>历史查询</span>
                    </div>
                </div>
                <div class="wrap3">
                    <p>2016年4月份统计</p>
                    <ul class="wrap3-ul">
                        <li class="li1">
                            <div>
                                <span>133311</span>
                                <em>成交量</em>
                            </div>
                            <div class="wrap3-ulDiv"></div>
                        </li>
                        <li>
                            <div>
                                <span>133311</span>
                                <em>成交量</em>
                            </div>
                            <div class="wrap3-ulDiv"></div>
                        </li>
                        <li>
                            <div>
                                <span>133311</span>
                                <em>成交量</em>
                            </div>
                            <div class="wrap3-ulDiv"></div>
                        </li>
                        <li>
                            <div>
                                <span>133311</span>
                                <em>成交量</em>
                            </div>
                            <div class="wrap3-ulDiv"></div>
                        </li>
                    </ul>
                </div>
                <div class="wrap4">
                    <div class="wrap-style wrap4-1">
                        <h3>第一组项目</h3>
                        <div class="wrap4-inner1">
                            <ul>
                                <li class="li-visited"><a href="#table1">TAB切换一</a></li>
                                <li><a href="#table2">TAB切换二</a></li>
                                <li><a href="#table3">TAB切换三</a></li>
                                <li><a href="#table4">TAB切换四</a></li>
                                <li><a href="#table5">TAB切换五</a></li>
                            </ul>
                            <div class="wrap4-inner2">
                                <div class="wrap4-inner3">
                                    <table id="table1">
                                        <tr>
                                            <td>购买材料1</td>
                                            <td>购买材料2</td>
                                            <td>购买材料3</td>
                                            <td>购买材料4</td>
                                        </tr>
                                        <tr>
                                            <td>购买材料1</td>
                                            <td>购买材料2</td>
                                            <td>购买材料3</td>
                                            <td>购买材料4</td>
                                        </tr>
                                        <tr>
                                            <td>购买材料1</td>
                                            <td>购买材料2</td>
                                            <td>购买材料3</td>
                                            <td>购买材料4</td>
                                        </tr>
                                        <tr>
                                            <td>购买材料1</td>
                                            <td>购买材料2</td>
                                            <td>购买材料3</td>
                                            <td>购买材料4</td>
                                        </tr>
                                        <tr>
                                            <td>购买材料1</td>
                                            <td>购买材料2</td>
                                            <td>购买材料3</td>
                                            <td>购买材料4</td>
                                        </tr>
                                        <tr>
                                            <td>购买材料1</td>
                                            <td>购买材料2</td>
                                            <td>购买材料3</td>
                                            <td>购买材料4</td>
                                        </tr>
                                    </table>
                                    <div id="table2">2</div>
                                    <div id="table3">3</div>
                                    <div id="table4">4</div>
                                    <div id="table5">5</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="wrap-style wrap4-2">
                        <h3>第一组项目</h3>
                        <div class="wrap4-2-inner">
                            <div>
                                <p>标题</p>
                                <span>项目报表三</span>
                                <div class="wrap4-2-inner2">
                                    <div>
                                        <p>价格</p>
                                        <span>&yen; 158</span>
                                    </div>
                                    <div>
                                        <p>负责人</p>
                                        <span>小A</span>
                                    </div>
                                </div>
                                <p>详细描述</p>
                                <span>该项目目前负责人是....</span>
                            </div>
                            <div class="wrap4-2-inner3">
                                <label for="xieyi"><input type="checkbox" name="xieyi"></label>
                                <em>遵守保密协议</em>
                                <a href="###">搜索</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="wrap5">
                    <div class="wrap-style wrap5-1">
                        <h3>日历</h3>
                        <div class="wrap5-1-inner">
                            <div>
                                <select name="" id="" class="w">
                                    <option value="2016">2016</option>
                                    <option value="2015">2015</option>
                                </select>
                                <select name="" id="" class="w2">
                                    <option value="4">4月</option>
                                    <option value="5">5月</option>
                                </select>
                                <select name="" id="">
                                    <option value="">标准日期</option>
                                </select>
                                <a href="###">返回今天</a>
                            </div>
                            <ul>
                                <li>一</li>
                                <li>二</li>
                                <li>三</li>
                                <li>四</li>
                                <li>五</li>
                                <li>六</li>
                                <li>日</li>
                            </ul>
                            <table>
                                <tr>
                                    <td><span>&nbsp;</span><span></span></td>
                                    <td><span>&nbsp;</span><span></span></td>
                                    <td><span>&nbsp;</span><span></span></td>
                                    <td><span>&nbsp;</span><span></span></td>
                                    <td><span>1</span><span class="red">愚人节</span></td>
                                    <td><span class="red">2</span><span>廿五</span></td>
                                    <td><span class="red">3</span><span>廿六</span></td>
                                </tr>
                                <tr>
                                    <td><span>4</span><span>廿七</span></td>
                                    <td><span>5</span><span class="red">清明</span></td>
                                    <td><span>6</span><span>廿九</span></td>
                                    <td><span>7</span><span>三月</span></td>
                                    <td><span>8</span><span>初二</span></td>
                                    <td class="border-yellow"><span class="red">9</span><span>初三</span></td>
                                    <td><span class="red">10</span><span>初四</span></td>
                                </tr>
                                <tr>
                                    <td class="border-yellow"><span>12</span><span>初五</span></td>
                                    <td><span>13</span><span>初六</span></td>
                                    <td><span>14</span><span>初七</span></td>
                                    <td><span>15</span><span>初八</span></td>
                                    <td><span class="red">16</span><span>初十</span></td>
                                    <td><span class="red">17</span><span>十一</span></td>
                                    <td><span>18</span><span>十二</span></td>
                                </tr>
                                <tr>
                                    <td class="border-yellow"><span>19</span><span>十三</span></td>
                                    <td><span>20</span><span>十四</span></td>
                                    <td><span>21</span><span>十五</span></td>
                                    <td><span>22</span><span>十六</span></td>
                                    <td><span class="red">23</span><span>十七</span></td>
                                    <td><span class="red">24</span><span>十八</span></td>
                                    <td><span>25</span><span>十九</span></td>
                                </tr>
                                <tr>
                                    <td><span>26</span><span>廿十</span></td>
                                    <td><span>27</span><span>廿一</span></td>
                                    <td><span>28</span><span>廿二</span></td>
                                    <td><span>29</span><span>廿三</span></td>
                                    <td><span class="red">30</span><span>廿四</span></td>
                                    <td><span>&nbsp;</span><span>&nbsp;</span></td>
                                    <td><span>&nbsp;</span><span>&nbsp;</span></td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <div class="wrap-style wrap5-2">
                        <h3>汽车行业品牌榜</h3>
                        <div class="wrap5-2-inner">
                            <ul>
                                <li class="li-active">
                                    <div class="divW1">排名</div>
                                    <div class="divW2">品牌</div>
                                    <div class="divW3">搜素指数</div>
                                </li>
                                <li>
                                    <div class="divW1">1</div>
                                    <div class="divW2">大众</div>
                                    <div class="divW3">48912001<span><em></em></span></div>
                                </li>
                                <li>
                                    <div class="divW1">2</div>
                                    <div class="divW2">丰田</div>
                                    <div class="divW3">29307333<span><em class="em1"></em></span></div>
                                </li>
                                <li>
                                    <div class="divW1">3</div>
                                    <div class="divW2">奥迪</div>
                                    <div class="divW3">29307333<span><em class="em2"></em></span></div>
                                </li>
                                <li>
                                    <div class="divW1">4</div>
                                    <div class="divW2">本田</div>
                                    <div class="divW3">23139070<span><em class="em3"></em></span></div>
                                </li>
                                <li>
                                    <div class="divW1">5</div>
                                    <div class="divW2">福特</div>
                                    <div class="divW3">22324279<span><em class="em4"></em></span></div>
                                </li>
                                <li>
                                    <div class="divW1">6</div>
                                    <div class="divW2">宝马</div>
                                    <div class="divW3">21444077<span><em class="em5"></em></span></div>
                                </li>
                                <li>
                                    <div class="divW1">7</div>
                                    <div class="divW2">现代</div>
                                    <div class="divW3">20114969<span><em class="em6"></em></span></div>
                                </li>
                                <li>
                                    <div class="divW1">8</div>
                                    <div class="divW2">起亚</div>
                                    <div class="divW3">19251680<span><em class="em7"></em></span></div>
                                </li>
                                <li>
                                    <div class="divW1">9</div>
                                    <div class="divW2">奔驰</div>
                                    <div class="divW3">19272830<span><em class="em8"></em></span></div>
                                </li>
                                <li>
                                    <div class="divW1">10</div>
                                    <div class="divW2">别克</div>
                                    <div class="divW3">18544027<span><em class="em9"></em></span></div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            </main>
            <aside>
                <dl>
                    <dt><span></span></dt>
                    <dd>ABC123</dd>
                </dl>
                <div class="aside-div">
                    <div>
                        <span class="aside-divFont">110</span>
                        <span>收藏</span>
                    </div>
                    <div>
                        <span class="aside-divFont">313</span>
                        <span>粉丝</span>
                    </div>
                </div>
                <ul class="aside-ul">
                    <li class="aside-li1">
                        <a href="###">个人报表</a>
                        <ul class="aside-ul2">
                            <li class="aside-ul2Li1"><a href="###" class="link">文件一</a></li>
                            <li class="aside-ul2Li2">
                                <a href="###">文件二</a>
                                <ul>
                                    <li class="aside-ul2Li3"><a href="###" class="active-a">文档1</a></li>
                                    <li class="aside-ul2Li3"><a href="###" class="link-a">文档2</a></li>
                                </ul>
                            </li>
                            <li class="aside-ul2Li1"><a href="###" class="link">文件三</a></li>
                        </ul>
                    </li>
                    <li class="aside-li2"><a href="###">个人收藏</a></li>
                    <li class="aside-li3"><a href="###">我的分享</a></li>
                    <li class="aside-li2"><a href="###">图库</a></li>
                    <li class="aside-li2"><a href="###">成长记录</a></li>
                    <li class="aside-li4"><a href="###">账户信息</a></li>
                </ul>
            </aside>
        </div>
    </body>
</html>